<template>
  <div class="content">
    <div class="top">
        <div>历史公告</div>
        <div>
            <el-menu active-text-color="#409EFF" :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                <el-menu-item index="1">今天</el-menu-item>
                <el-menu-item index="7">7天</el-menu-item>
                <el-menu-item index="14">14天</el-menu-item>
                <el-menu-item index="30">30天</el-menu-item>
            </el-menu>
            <div>
                <el-date-picker
                    v-model="valueDate"
                    type="daterange"
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker>
            </div>
        </div>
    </div>
    <div class="content-info">
        <div v-for="item in itemsInfo" :key="item.index">
            <div>{{item.imag}}</div>
            <div>
                <div>{{item.title}}</div>
                <div>{{item.content}}</div>
            </div>
        </div>
    </div>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
  </div>
</template>

<script>
import TableData from '@/utils/TableData.js';
import Pagination from '@/components/Pagination';
export default {
    components: {
        Pagination
    },
    data() {
        return {
            activeIndex: "1",
            valueDate:'',
            itemsInfo:null,
            total: 0,
            listQuery: {
                page: 1,
                limit: 5,
                importance: undefined,
                title: undefined,
                type: undefined,
                sort: '+id'
            }
        }
    },
    methods: {
        //选择具体时间
        handleSelect(key, keyPath) {
            console.log(key, keyPath);
        },
        getList(){
            let TableArray = []
            for(let i = (this.listQuery.page-1)*this.listQuery.limit;
            i < this.listQuery.page * this.listQuery.limit;i++){
                if(i < TableData.info.length){
                    TableArray.push(TableData.info[i]);
                }
            }
            this.itemsInfo = TableArray;
            this.total = TableData.info.length;
        }
    },
    created () {
        this.getList();
    },
}
</script>

<style scoped>
.content{
    border: 1px solid #EBEEF5;
    width: 100%;
    
}
.top{
    width: 100%;
    height: 61px;
    display: flex;
}
.top>div{
    width: 50%;
    height: 61px;
    line-height: 61px;
}
.top>div:first-child{
    padding-left: 10px;
}
.top>div:last-child{
    display: flex;
}
.top>div:last-child>div:last-child{
    padding-left: 20px;
}
.content-info{
    padding: 0px 30px;
}
.content-info>div{
    width: 100%;
    height: 80px;
    display: flex;
}
.content-info>div>div:first-child{
    width: 80px;
    height: 80px;
}
.content-info>div>div:last-child>div:first-child{
    width: 80%;
    height: 30px;
    line-height: 30px;
}
</style>